<template>
  <div>
    <!--查询条件-->
    <DepartmentManageQuery
      :query="query"
      :loadTableList="loadTableList"
      :removeQueryField="removeQueryField"
      :clearQuery="clearQuery"
    />
    <!--表格，包含工具栏和分页-->
    <DepartmentManageTable
      :table="table"
      :loadTableList="loadTableList"
      :changePageSize="changePageSize"
      :changePage="changePage"
      @addRow="addRow"
      @editRow="editRow"
    />
    <DepartmentAddOrEditDialog
      ref="dialogRef"
      :table="table"
      :action="action"
    />
  </div>
</template>

<script lang="ts" setup>
import DepartmentManageQuery from '@/views/page/authority/departmentmanage/DepartmentManageQuery.vue';
import DepartmentManageTable from '@/views/page/authority/departmentmanage/DepartmentManageTable.vue';
import DepartmentAddOrEditDialog from '@/views/page/authority/departmentmanage/DepartmentAddOrEditDialog.vue';
import { getCurrentInstance, provide, ref } from 'vue';
import Request from '@/api/request/request';
import useTableList from '@/api/common/useTableList';
import { Department } from '@/types/interface/auth_interface';
import { ResponseData } from '@/types/interface/base_interface';

const { proxy } = getCurrentInstance();
// 表格工具必备参数
const {
  table, query, loadTableList, removeQueryField, clearQuery, changePageSize, changePage,
} = useTableList(proxy.$urls.API_URL_BACKSTAGE_DEPARTMENT_TREE, false);
// 将表格刷新函数传到子容器
provide('loadTableList', loadTableList);
// provide('table', table);

// 表单对象，可以在这里加上表单默认值W
const action = ref('get');
const dialogRef = ref();
// 点击添加按钮，交由父组件处理
const addRow = (id:number) => { // id是部门的主键，表示在该部门下添加子部门信息
  // 添加表单的初始值
  const form = {
    sort: 0,
    parentId: id,
  };
  // 表单的模式为添加
  action.value = 'post';
  // 打开对话框
  dialogRef.value!.openDialog(form);
};

// 编辑按钮操作
const editRow = async (row:Department) => {
  action.value = 'put';
  // 读取账户信息
  const resData:any = await new Request(`${proxy.$urls.API_URL_BACKSTAGE_DEPARTMENT_MANAGE}/${row.id}`).get();
  if (resData.success) {
    const form = resData.data;
    dialogRef.value!.openDialog(JSON.parse(JSON.stringify(form)));
  }
};
</script>
<style lang="scss" scoped>

</style>
